/*design tokens*/

h1 {
    color: #6366F1;
    margin-bottom: 2rem;
}

h2 {
    margin-bottom: 2rem;
}

h3 {
    margin-bottom: 2rem;
}

h4 {
    margin-bottom: 1.5rem;
}

ul li {
    font-family: 'Lexend', sans-serif;
    list-style-position: inside;
    margin-bottom: 0.4rem;
}

ol li {
    font-family: 'Lexend', sans-serif;
    line-height: 1.5;
    list-style-position: inside;
}


.p-bold {
    font-weight: 700;
}

.bg-navy {
    background-color: #344984;
}

.bg-blue {
    background-color: #CAD8FF;
}

.bg-green {
    background-color: #D3FFCC;
}

.bg-grey {
    background-color: #E6EAF7;
}

.color-white {
    color: #f7f7f8;
}

.color-yellow {
    color: #FFC75E;
}


.tag-dark {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    border-radius: 2rem;
    background-color: #404040;
    color: #f7f7f8;
    margin-bottom: 1rem;
}

.tag-blue {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    border-radius: 2rem;
    background-color: #6366F1;
    color: #f7f7f8;
    margin-bottom: 1rem;
}

/*hero section */

.banner-section img {
    max-width: 100%;
    object-fit: cover;
    margin-right: 0 auto;
}

/*intro section */
.intro-container {
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
}

.intro-item ul {
    list-style-type: none;
}

.intro-item img {
    width: 2rem;
}

/*project overview section */
.overview-container {
    max-width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 3rem;
}



/*design process */

.process-container {
    border-radius: 1rem;
    display: flex;
    padding: 3rem;
    justify-content: space-between;
    background-color: #344984;
    gap: 4rem;
}

/*assumption section */

.assum-container {
    max-width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr auto;
    gap: 1rem;
}

.assum-item {
    padding: 2rem;
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    grid-template-rows: auto auto;
    align-content: center;
    justify-items: start;
    border-radius: 1rem;
}

.assum-container .assum-item:nth-child(3) {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
}

.assum-item p {
    grid-column: 1 / 4;
}

/*research section */

.research-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 1rem;
}

.research-item {
    padding: 2rem;
    border-radius: 1rem;
}

.research-item .p-bold {
    margin-bottom: 0.6rem;
}

.research-item:nth-child(3) {
    grid-column: 2;
    grid-row: 1 / span 2;
}

.research-item:nth-child(3) ul {
    margin-bottom: 2rem;
}


/*01 testing section */
.testing-container {
    display: grid;
    grid-template-columns: 50% 1fr;
    grid-template-rows: repeat(2, auto);
    gap: 3rem;
    align-items: center;
    margin-bottom: 3rem;
}

.testing-container figure {
    grid-column: 2;
    grid-row: 1 / span 2;
}

.testing-container figure img {
    max-width: 100%;
}

.testing-container div {
    grid-column: 1 / 2;
}

.testing-container img {
    grid-column: 2 / 4;
    grid-row: 1 / 4;
}

/*key takeaway section */
.keyTakeaway-container {
    margin-top: 2rem;
    max-width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    justify-items: space-between;
    align-items: center;
    gap: 4rem;
}

.keyTakeaway-left-wrapper {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.keyTakeaway-left-wrapper .item {
    padding: 1rem 2rem;
    border-radius: 1rem;
    border: 1px solid rgba(64, 64, 64, 0.1);
}

.keyTakeaway-left-wrapper .item p {
    margin-top: 0.5rem;
}

.keyTakeaway-right-wrapper img {
    width: 14rem;
}

/* 02 user persona section */
.persona-container {
    max-width: 100%;
    margin-top: 2rem;
    display: flex;
    align-items: center;
    justify-items: space-between;
    gap: 3rem;
}

.persona-container figure {
    max-width: 100%;
    flex: 1
}

.persona-container figure img {
    width: 100%;
}

.persona-container p {
    flex: 1
}

.persona-container p {
    padding: 2rem;
    border-radius: 1rem;
}


/* 03 empathy map section*/
.empathyMap-container {
    max-width: 100%;
    display: flex;
    justify-items: space-between;
    gap: 2rem;
}

.empathyMap-container div {
    flex: 1;
}

.empathyMap-container figure {
    flex: 1;
}

.empathyMap-container figure img {
    width: 100%;
}

/* 04 Competitor Analysis section */
.CA-section img {
    max-width: 100%;
    margin-top: 2rem;
}

/* 05 Heuristic Evaluation analysis */

.heur-container .item {
    padding: 2.5rem;
    display: flex;
    gap: 2rem;
    align-items: center;
    border-radius: 1rem;
    margin-bottom: 1rem;

}

.heur-container .item img {
    max-width: 50%;
}


/* 06 user path section */
.path-section div {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.path-section div img {
    width: 100%;
}

/* 07 usability section */
.usabilityTest-container {
    margin-bottom: 3rem;
}

.usabilityTest-container img {
    margin-top: 2rem;
    width: 100%;
}

.fig-1st div {
    max-width: 100%;
    display: flex;
    flex-direction: row;
    justify-items: center;
    gap: 1rem;
}

.fig-1st img {
    width: 50%;
}

/* ideation phase section */
.ideation-container {
    margin-top: 1rem;
    max-width: 100%;
    display: flex;
    gap: 1rem;
}

.ideation-section .tag-dark {
    margin-bottom: 1rem;
}

.ideation-container .item {
    height: auto;
    flex: 1;
    padding: 1.5rem;
    border-radius: 1rem;
}

.ideation-container ul {
    margin-top: 0.5rem;
}

.images-wrapper img {
    width: 100%;
    margin-top: 1rem;
}

/* ----------------site map section */
.sitemap-container {
    margin-top: 3rem;
}

.sitemap-container figure img {
    margin-top: 1rem;
    width: 100%;
}

/* ----------------design section---- */
.design-section {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.wireframes-container {
    width: 100%;
}

.wireframes-container img {
    width: 100%;
}

.design-section figure img {
    margin-top: 1rem;
    max-width: 100%;
}

.feedback-container {
    width: 100%;
}

.feedback-block-wrapper {
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    gap: 1rem;

}

.feedback-block-wrapper .item-block {
    flex: 0 0 calc(50% - 0.5rem); /* 每个元素占50%宽度减去间距的一半 */
    display: flex;
    flex-direction: column;
    padding: 2rem;
    border-radius: 1rem;
}

.item-title-box {
    width: 100%;
    display: flex;
    align-items: start;
    gap: 1rem;
    justify-content: space-between;
}

/* iteration section */
.iteration-section {
    max-width: 100%;
}

.iteration-list {
    padding: 3rem;
}

.iteration-section div {
    max-width: 100%;
    border-radius: 1rem;
    margin: 1.5rem auto;
}

.iteration-section figure img {
    width: 100%;
}

.mobile-container {
    width: 100%;
}

.mobile-container .mobile-wireframes-wrapper {
    max-width: 100%;
    margin-top: 1.5rem;
    display: flex;
    flex-direction: row;
    justify-items: space-between;
    align-items: start;
    gap: 8rem;
}

.mobile-container figure img {
    width: 80%;
}

.mobile-container figure video {
    width: 28%;
}

.styleGuide-container {
    max-width: 100%;
    display: flex;
    align-items: start;
    gap: 1rem;
}

.styleGuide-container img {
    width: 20rem;
    object-fit: cover;
    flex: 1
}

/*Reflections section*/
.reflections-container {
    display: flex;
    align-items: start;
    justify-content: center;
    gap: 6rem;
    padding: 3rem;
    border-radius: 1rem;
}

.reflections-container h4 {
    color: #FFE376;
}


/*mobile*/
@media (min-width: 375px) and (max-width: 768px) {

    html, body {
        max-width: 100%;
        overflow-x: scroll;
    }
    
   
    h1 {
        font-size: 2rem;
    }

    h2 {
        margin-bottom: 1rem;
        font-size: 1.5rem;
    }

    p {
        font-size: 1rem;
    }


    h4 {
        font-size: 1.2rem;
        margin-bottom: 0.8rem;
    }

    section {
        width: 100%;
        padding: 1rem;
        gap: 0px;
        margin: 3.5rem auto;
    }

    .banner-section {
        margin-bottom: 2.5rem;
    }

    .intro-container {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        row-gap: 3rem;
    }
    
    .intro-container .intro-item {
        width: 44%;
    } 

    .overview-container {
        display: flex;
        flex-wrap: wrap;
    }

    .process-container {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        padding: 2rem;
        row-gap: 2rem;
    }

    .process-item {
        width: 50%;
    }

    .assum-container {
        max-width: 100%;
        display: flex;
        flex-wrap: wrap;
        padding: 0px;
    }
    
    .assum-item {
        width: 100%;
    }

    .research-container {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }

    .research-item {
        padding: 2rem;
    }
    .testing-section {
        margin: 0rem;
    }
    
    .testing-container {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 1.5rem;
    }

    .keyTakeaway-container {
        display: flex;
        flex-wrap: wrap;
    }

    .keyTakeaway-container .item {
        max-width: 100%;
        padding: 1rem;
    }

    .keyTakeaway-right-wrapper img {
        display: none;
    }

    .persona-container {
        width: 100%;
        display: block;
        flex-wrap: wrap;
    }

    .persona-container figure {
        width: 100%;
        margin-bottom: 1rem;
    }

    figure figcaption {
        margin: 0px;
    }

    .persona-container p {
        background: none;
        color: #404040;
        padding: 0px;
    }

    .empathyMap-container {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
    }

    .heur-container .item {
        width: 100%;
        display: flex;
        flex-direction: column;
        padding: 1.5rem;
    }

    .heur-container .item img {
        max-width: 100%;
    }

    .heur-container .item:nth-child(2) img {
        order: -1;
    }

    .path-section {
        margin-bottom: 2rem;
    }

    .path-section div ul li {
        margin-bottom: 1rem;
    }

    .path-section figure {
        margin: 0px;;
    }

    .ideation-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
    }

    .feedback-block-wrapper {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .feedback-block-wrapper .item-block {
        padding: 1.5rem;
    }

    .iteration-list {
        padding: 1.5rem;
    }

    .iteration-list ul li {
        margin-bottom: 1.5rem;
    }

    .mobile-container .mobile-wireframes-wrapper {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        justify-content: center;
    }

    .mobile-container .mobile-wireframes-wrapper img {
        width: 100%;
    }

    .mobile-container .mobile-wireframes-wrapper video {
        width: 40%;
    }

    .styleGuide-container {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .reflections-container {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }
}

/* no adjustment needed for ipad devices */